<template>
  <van-search
    v-model="searchValue"
    v-bind="$attrs"
    :background="props.bg"
    :placeholder="props.placeholder"
    :shape="props.shape"
    @click-left-icon="clickLightIcon"
  />
</template>

<script setup lang="ts">
import { computed } from 'vue'

import { debounce } from 'lodash-es'

const customTime = 500

export interface SearchProps {
  modelValue?: string | number
  bg?: string
  placeholder?: string
  shape?: string
}

const props = withDefaults(defineProps<SearchProps>(), {
  modelValue: '',
  bg: '#036055',
  placeholder: '请输入关键字进行查询',
  shape: 'round'
})

const emits = defineEmits({
  'update:modelValue': (val) => !!val,
  'click-left-icon': (val) => !!val
})

const searchValue = computed({
  get: () => {
    return props.modelValue
  },
  set: debounce((val: number | string) => {
    emits('update:modelValue', val)
  }, customTime)
})

const clickLightIcon = debounce(() => {
  emits('click-left-icon', searchValue.value)
}, customTime)

defineOptions({
  name: 'Search'
})
</script>

<style scoped></style>
